<template>
  <div class="parent-list">
    <div
      class="item flex px-20px py-10px box-border"
      :class="userImId === i.userId ? 'bg-F0F0F0' : ''"
      v-for="i in list"
      :key="i.userId"
      @click="toSingleChat(i.userId)"
    >
      <div
        class="avatar text-white flex-center relative"
        :style="`background-color: ${i.userInfo.avatarBgc};`"
      >
        <span class="p-10px text-center" v-if='i.userInfo.relationshipType'>
          {{ studentInfo.name.slice(-2)
          }}{{ i.userInfo.relationshipType | relationshipName(relationshipTypeDict) }}
        </span>
        <span class="p-10px text-center" v-else>
          {{ i.userInfo.name.slice(-2)}}
        </span>
        <div
          class="unread-count bg-FF4040 text-white flex-center absolute"
          v-show="i.unreadMessageCount"
        >
          <span>{{ i.unreadMessageCount }}</span>
        </div>
      </div>
      <div class="content flex-1 flex flex-col justify-between">
        <div class="name text-333" v-if='i.userInfo.relationshipType'>
          {{ studentInfo.name.slice(-2)
          }}{{ i.userInfo.relationshipType | relationshipName(relationshipTypeDict) }}
        </div>
        <div class="name text-333" v-else>
          {{ i.userInfo.name}}
        </div>
        <div class="message text-A3A3A3">
          {{ i.messages | lastMessageContent }}
        </div>
      </div>
      <div class="time text-A3A3A3">
        {{ i.messages | lastMessageTime($utils.parseTime) }}
      </div>
    </div>
  </div>
</template>

<script>
import IM from '@/im'
import { mapState, mapActions } from 'vuex'

const { MessageType } = IM

export default {
  filters: {
    lastMessageContent(messages) {
      if (Array.isArray(messages) && messages.length > 0) {
        const { messageType } = messages[messages.length - 1]

        if (messageType === MessageType.TEXT) {
          return messages[messages.length - 1].content
        } else if (messageType === MessageType.VOICE) {
          return '[语音]'
        } else if (messageType === MessageType.CALL_INVITE_VOICE) {
          return '[语音通话]'
        } else if (messageType === MessageType.CALL_INVITE_VIDEO) {
          return '[视频通话]'
        } else {
          return '未知消息类型'
        }
      } else {
        return ''
      }
    },
    lastMessageTime(messages, parseTime) {
      if (Array.isArray(messages) && messages.length > 0) {
        const sentTime = messages[messages.length - 1].sentTime

        if (new Date(Number(sentTime)).toDateString() === new Date().toDateString()) {
          // 当天
          return parseTime(sentTime, '{h}:{i}')
        } else if (new Date(Number(sentTime)) < new Date()) {
          // 之前时间
          return parseTime(sentTime, '{m}-{d}')
        } else {
          return ''
        }
      } else {
        return ''
      }
    },
    relationshipName(relationshipType, relationshipTypeDict) {
      try {
        const { label: relationshipName } = relationshipTypeDict.find(
          (type) => type.value == relationshipType
        )

        return relationshipName
      } catch {
        return '家长'
      }
    }
  },
  props: {
    userImId: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      relationshipTypeDict: null
    }
  },
  computed: {
    ...mapState(['im']),
    studentInfo() {
      const { userId, users } = this.im
      return users.find((u) => u.userId === userId)
    }
  },
  async created() {
    this.relationshipTypeDict = await this.getDictByType('relationship_type')
  },
  mounted() {},
  methods: {
    ...mapActions(['getDictByType']),
    toSingleChat(userImId) {
      this.$emit('change', userImId)
    }
  }
}
</script>

<style lang="scss" scoped>
.parent-list {
  .item {
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 60px;
      font-size: 16px;

      .unread-count {
        width: 23px;
        height: 23px;
        border-radius: 23px;
        font-size: 12px;
        top: -4px;
        right: -4px;
      }
    }

    .content {
      padding: 3px 10px;

      .name {
        width: 144px;
        font-size: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .message {
        width: 144px;
        font-size: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .time {
      padding: 6px 0;
      font-size: 16px;
      white-space: nowrap;
    }
  }
}
</style>
